<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><span>第三方应用</span></el-breadcrumb-item>
      <el-breadcrumb-item>商户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="query">
      <div>商户列表</div>
      <div style="display: flex">
        <div style="display: flex">
          <el-input
            size="mini"
            placeholder="请输入商户名称"
            v-model="search"
            prefix-icon="el-icon-search"
            maxlength="50"
          >
          </el-input>
          <el-button
            @click="searchEvent"
            v-on:keyup.enter="searchEvent"
            style="margin-left: -1px"
            type="primary"
            size="mini"
            >搜索</el-button
          >
          <el-button @click="(search = ''), listAxios()" size="mini"
            >重置</el-button
          >
        </div>
        <el-button
          style="margin-left: 20px"
          type="primary"
          size="mini"
          @click="dialogVisible = true"
        >
          新增商户
        </el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        stripe
        align="center"
        :data="tableData.list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="商户名称" min-width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.name"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户ID" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.mchId"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.mchId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商户Key" min-width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.mchKey"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.mchKey }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商户公司" min-width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.company"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.company }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" min-width="110">
          <template slot-scope="scope">
            {{ $moment(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right">
          <template slot-scope="scope">
            <div class="option">
              <!-- v-if="" -->
              <span
                v-if="
                  scope.row.edit && parArray.indexOf('fixMerchantCode') != -1
                "
                @click="update(scope.row)"
                >保存</span
              >
              <span
                v-if="
                  scope.row.edit && parArray.indexOf('fixMerchantCode') != -1
                "
                @click="cancelEdit(scope.row)"
                >取消</span
              >
              <span
                v-if="
                  !scope.row.edit && parArray.indexOf('fixMerchantCode') != -1
                "
                @click="scope.row.edit = !scope.row.edit"
                >编辑</span
              >
              <span
                v-if="parArray.indexOf('delectMerchantCode') != -1"
                @click="delectEvent(scope.row)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <p style="height: 30px"></p>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.totalPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <el-dialog
      title="新增商户"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        ref="addDataRulus"
        :model="addData"
        :rules="addDataRulus"
        label-width="80px"
      >
        <el-form-item label="商户名称" prop="name">
          <el-input
            v-model="addData.name"
            placeholder="请输入商户名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="商户ID" prop="mchId">
          <el-input
            v-model="addData.mchId"
            placeholder="请输入商户ID"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="商户Key" prop="mchKey">
          <el-input
            size="small"
            v-model="addData.mchKey"
            placeholder="请输入商户Key"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="商户公司" prop="company">
          <el-input
            size="small"
            v-model="addData.company"
            placeholder="请输入商户公司"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogVisible = false;
            $refs['addData'].resetFields();
          "
          size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="add('addDataRulus')" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data () {
    return {
      search: "",
      dialogVisible: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      applicationNames: [],
      addData: {
        company: "",
        mchId: "",
        mchKey: "",
        name: "",
      },
      addDataRulus: {
        company: [
          { required: true, message: "请输入商户公司", trigger: "blur" },
        ],
        mchId: [{ required: true, message: "请输入商户ID", trigger: "blur" }],
        mchKey: [{ required: true, message: "请输入商户Key", trigger: "blur" }],
        name: [{ required: true, message: "请输入商户名称", trigger: "blur" }],
      },
      parArray: [],
    };
  },
  created () {
    // 权限设定判断
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "merchantlistCode"
    );
    if (params[0]) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
    }
    // 权限设定判断

    this.listAxios();

    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  activated () {
    this.listAxios();
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    searchEvent () {
      this.pageNo = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    listAxios () {
      this.axios
        .post("wechat/wxpay/config/selectWxPayConfigList", {
          name: this.search,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            for (let i in res.data.list) {
              res.data.list[i].edit = false;
              res.data.list[i].name1 = res.data.list[i].name;
              res.data.list[i].mchId1 = res.data.list[i].mchId;
              res.data.list[i].mchKey1 = res.data.list[i].mchKey;
              res.data.list[i].company1 = res.data.list[i].company;
            }
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    add: _.debounce(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("wechat/wxpay/config/addWxPayConfig", {
              company: this.addData.company,
              mchId: this.addData.mchId,
              mchKey: this.addData.mchKey,
              name: this.addData.name,
            })
            .then((res) => {
              if (res.code == 0) {
                this.listAxios();
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.addData = {
                  company: "",
                  mchId: "",
                  mchKey: "",
                  name: "",
                };
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          return false;
        }
      });
    }, 300),
    update: _.debounce(function (row) {
      if (!row.company) {
        this.$message.warning("商户公司不能为空");
      } else if (!row.mchId) {
        this.$message.warning("商户ID不能为空");
      } else if (!row.name) {
        this.$message.warning("商户名称不能为空");
      } else if (!row.mchKey) {
        this.$message.warning("商户Key不能为空");
      } else {
        this.axios
          .post(
            "wechat/wxpay/config/updateWxPayConfig",
            {
              company: row.company,
              id: row.id,
              mchId: row.mchId,
              mchKey: row.mchKey,
              name: row.name,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("修改成功");
              row.edit = false;
              this.listAxios();
            } else {
              this.$message.error(res.message);
            }
          });
      }
    }, 400),
    // 取消修改
    cancelEdit (row) {
      row.edit = false;
      row.name = row.name1;
      row.mchId = row.mchId1;
      row.mchKey = row.mchKey1;
      row.company = row.company1;
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },

    // 删除
    delectEvent: _.debounce(function (row) {
      this.$confirm("确定要删除该商户吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/wechat/wxpay/config/deleteWxPayConfig?id=" + row.id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  //   margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #333;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  border-radius: 5px 10px 0px 5px;
  background: #fff;
  padding: 10px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 15px;
    // color: #2d7edf;
    padding-bottom: 10px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  float: left;
  margin-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}
.table {
  margin: 0px;

  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.option {
  span {
    padding: 0 5px;
    color: #0066ff;
  }
  span:hover {
    cursor: pointer;
  }
}
</style>
